<template>
  <div>
    <div v-if="list.length<1" class="noLength">
      <br />
      <br />
      <br />您还没有收货地址，前往新增地址~
      <van-button class="btn-fix" type="primary" size="large" @click="onAdd">新增地址</van-button>
    </div>
    <van-address-list
      class="address-list"
      v-else
      v-model="chosenAddressId"
      :list="list"
      @add="onAdd"
      @edit="onEdit"
      @click-item="checkAddress"
    />
  </div>
</template>
<script>
import { Toast } from "vant";
import { addressIndex, addressEdit } from "@/api/address.js";
import { ordersAdd, ordersPay } from "@/api/products.js";
import { getWxConfig } from "@/api/mine.js";
import { mapGetters } from "vuex";
var wx = require("weixin-js-sdk");
export default {
  data() {
    return {
      chosenAddressId: "1",
      list: []
    };
  },
  computed: {
    ...mapGetters(["userId"])
  },
  methods: {
    onAdd() {
      // eslint-disable-next-line
      console.log("新增地址");
      this.$router.push({ path: "/addressEdit", query: { type: "edit" } });
    },

    onEdit(item, index) {
      Toast("编辑地址:" + index);
      // eslint-disable-next-line
      console.log(this.$route.query.params);
    },

    checkAddress(item) {
      // eslint-disable-next-line
      item.is_default = 1;
      addressEdit(item);
      let that = this;
      Toast({
        message: "正在生成订单!",
        overlay: true,
        loadingType: "spinner",
        onClose: () => {
          let params = this.$route.query.params;
          params.address_id = item.id;
          ordersAdd(params).then(res => {
            ordersPay(res).then(payData => {
              wx.ready(function() {
                wx.chooseWXPay({
                  appId: payData.appId,
                  timestamp: payData.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                  nonceStr: payData.nonceStr, // 支付签名随机串，不长于 32 位
                  package: payData.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                  signType: payData.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                  paySign: payData.paySign, // 支付签名
                  success: function() {
                    // 支付成功后的回调函数
                    Toast({
                      message: "支付成功!",
                      overlay: true,
                      loadingType: "spinner",
                      onClose: () => {
                        that.$router.go(-1);
                      }
                    });
                  }
                });
              });
            });
          });
        }
      });
    }
  },
  mounted() {
    getWxConfig().then(res => {
      wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: res.appId, // 必填，公众号的唯一标识
        timestamp: res.timeStamp, // 必填，生成签名的时间戳
        nonceStr: res.nonceStr, // 必填，生成签名的随机串
        signature: res.signature, // 必填，签名
        jsApiList: ["chooseWXPay"] // 必填，需要使用的JS接口列表
      });
      wx.ready(function() {
        wx.checkJsApi({
          jsApiList: ["chooseWXPay"],
          success: function() {},
          fail: function() {}
        });
      });
    });
    let isFromProject = this.$route.query.fromPage;
    this.isFromProject = isFromProject || "";
    //   请求收货地址列表
    addressIndex({
      user_id: this.userId
    }).then(res => {
      // eslint-disable-next-line
      console.log(res);
      res.map(data => {
        data.name = data.full_name;
        data.tel = data.phone;
        data.address = data.street1 + data.street2;
      });
      this.list = res;
    });
  }
};
</script>
<style lang="less" scoped>
.noLength {
  text-align: center;
  padding: 0 10px;
  background: white;
  height: 100vh;
  button {
    margin-top: 50px;
  }
}
</style>
<style lang="less">
.address-list .van-button--danger,
.address-list .van-address-item .van-radio__icon--checked .van-icon {
  background: black;
  border-color: black;
}
.address-list .van-cell {
  width: auto;
}
</style>